<template>
	<view>
		<!-- 头部 -->
		<view class="header">
			<icons @click="backBeforePage" type="left" color="#ffffff" size="26"></icons>
			<view class="">
				食材分类
			</view>
		</view>
		<!-- 搜索 -->
		<view class="first">
			<view class="tab" @click="changeTab">
				<view class="left" :class="{active:currentTab == '分类'}">
					分类
				</view>
				<view class="right" :class="{active:currentTab == '食材'}">
					食材
				</view>
			</view>
			<view class="search">
				<image src="/static/image/souuo@3x.png" mode=""></image>
				<text>想吃什么搜这里，如麻婆豆腐</text>
			</view>
		</view>
		<!-- 列表 -->
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y scroll-with-animation>
				<view :id="index" class="nav-left-item" :class="{'active':index == currentIndex}"
					v-for="(item,index) in classifyData" :key="item._id" @click="changeIndex">
					{{item.cat_name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" :scroll-into-view="told" @scroll="scrollSide" scroll-y scroll-with-animation>
				<view :id="'category' + index" v-for="(item_nav,index) in classifyData" :key="item_nav._id" class="box">
					<view class="title">{{item_nav.cat_name}}</view>
					<view class="grid_box">
						<view class="nav-right-item" v-for="(item,i) in item_nav.children" :key="i">
							<image :src="item.cat_icon" />
							<view>{{item.cat_name}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getCategoriesApi
	} from "../../../apis/categories.js"
	import icons from "../../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue"
	export default {
		mounted() {
			this.getCategoriesData()
		},
		data() {
			return {
				currentTab: "分类",
				currentIndex: 0, //表示默认展示右边第一个子列表
				told: "category0",
				classifyData: []
			}
		},
		methods: {
			//获取列表数据
			getCategoriesData() {
				getCategoriesApi().then(res => {
					this.classifyData = res.message
				})
			},
			//返回上一页
			backBeforePage() {
				uni.navigateBack()
			},
			//切换顶部tab
			changeTab() {
				if (this.currentTab == "分类") this.currentTab = "食材"
				else this.currentTab = "分类"
			},
			changeIndex(event) {
				this.currentIndex = event.currentTarget.id
				this.told = "category" + event.currentTarget.id
			},
			scrollSide(event) {
				//获取当前滚动高度
				let nowScrollTop = event.detail.scrollTop
				let index = 0
				const query = uni.createSelectorQuery().in(this)
				query.selectAll(".nav-left-item").boundingClientRect((nodes) => {
					let totalHeight = 0 //当前累计的高度和
					for (let i = 0; i < nodes.length; i++) {
						totalHeight += (nodes[i].height + 50)
						if (nowScrollTop < totalHeight) {
							this.currentIndex = i
							break
						}
					}
				}).exec()
			}
		},
		components: {
			icons
		}
	}
</script>

<style lang="scss" scoped>
	//头部
	.header {
		width: 100%;
		height: 150rpx;
		background-color: #ee7b2d;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;

		view {
			padding-top: 25rpx;
			line-height: 160rpx;
			text-align: center;
			color: #ffffff;
			font-size: 36rpx;
		}

		icons {
			position: absolute;
			top: 80rpx;
			left: 20rpx
		}
	}

	/* 搜索区域 */
	.first {
		width: 100%;
		height: 160rpx;
		background-color: #ee7b2d;
		padding-top: 160rpx;

		.tab {
			box-sizing: border-box;
			width: 380rpx;
			height: 50rpx;
			border-radius: 25rpx;
			border: 2rpx solid #ffffff;
			margin: 0 auto;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			text-align: center;
			color: #ffffff;
			font-size: 35rpx;

			.left {
				flex-grow: 1;
				height: 100%;
				line-height: 46rpx;
			}

			.right {
				flex-grow: 1;
				height: 100%;
				line-height: 46rpx;
			}

			.active {
				background-color: #ffffff;
				border-radius: 23rpx;
				color: #ee7b2d;
			}
		}

		//搜索
		.search {
			width: 692rpx;
			height: 60rpx;
			background-color: #f1f1f1;
			border-radius: 16rpx;
			margin: 24rpx auto 0rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 15rpx;
			}

			text {
				font-size: 22rpx;
				color: #bfbfbf;
			}
		}

	}

	//列表
	.page-body {
		height: calc(100vh - 320rpx);
		display: flex;
		background: #fff;
		overflow: hidden;
	}

	.nav-left {
		width: 25%;
		border-right: solid 6rpx #f6f6f6;
	}

	.nav-left-item {
		width: 100%;
		height: 130rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.active {
		background-color: #f6f6f6;
		color: #ee7b2d;
	}

	.nav-right {
		width: 75%;
	}

	.box {

		.grid_box {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 12rpx 100rpx;
			padding-bottom: 20rpx;
		}

		.nav-right-item {
			text-align: center;
			font-size: 16rpx;
			color: #767676;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.title {
			box-sizing: border-box;
			padding-left: 22rpx;
			padding-top: 14rpx;
			padding-bottom: 20rpx;
			font-size: 24rpx;
			color: #cbcbcb;
		}
	}

	.box:last-child {
		border: none;
		min-height: 10vh;
	}





	::-webkit-scrollbar {
		/*取消小程序的默认导航条样式*/
		width: 0;
		height: 0;
		color: transparent;
	}
</style>
